// 用于大屏场景（industryAPPContainer）使用的全局通用部分样式，这为简易方案，后续对接也方便

// 这个版本为【绿底林业版】样式。！！！其他行业样式是在通用蓝底版基础上的修改，不是独立完整样式！！！

// 注意，这个文件中，所有的样式必须写在iwhale-前缀样式（如iwhale-industrystyle）之下，以保证不会影响到其他厂商；
// 也因此，这个文件暂时不能用于覆盖popper弹出层样式！依然必须在popper-class内附带专用的iwhale-industrystyle

// ！！！这里使用到的样式禁止!important声明！！！
// 保留实际组件覆盖的机会。这里的样式仅仅是用于尽可能的涵盖通用样式，以减少目前填坑的工作量

$IWindustryPopBgColor: rgba(23, 37, 55, 0.9);
$IWindustryPrimaryTextColor: #4F9FFF;
$IWindustryDisableTextColor: #606266;
$IWLYTooltipBgColor: rgba(0, 34, 27, 0.95);
$IWLYDisableTextColor: rgba(255,255,255,0.7);
$IWLYPopBgColor: linear-gradient(180deg, rgba(0,67,63,0.85) 0%, rgba(0,19,30,0.74) 21%, #00131E 100%);
$IWLYTooltipOffset: 6px;

.iwhale-industrystyle.lystyle {
  // css变量

  // 基本
  // 主题色
  --iw-theme-color: rgba(2, 137, 109, 1);
  --iw-text-color: #FFFFFF;
  // 表单标签色
  --iw-form-label-color: rgba(255, 238, 177, .7);
  --event-label-color: rgba(255, 255, 255, .7);
  --event-active-color: #f9ff6c;
  --event-collect-color: #FFFFFF; // 告警详情里的收藏按钮颜色
  --event-collectactive-color: #f9ff6c;

  .el-tag,
  .el-select__tags .el-tag.el-tag--info {
    background-color: rgba(13, 201, 133, 0.2);
    color: #0DC985;
    border-color: transparent;
    .el-tag__close.el-icon-close {
      color: #0DC985;
      &:hover {
        color: #fff;
      }
    }
  }

  // 输入框覆写
  .el-input {
    .el-input-group__prepend {
      background-color: rgba(2,137,109,0.2);
    }
    .el-input__inner {
      background: rgba(2,137,109,0.2);
      &:not([readonly]):not([disabled]) {
        &:hover {
          border-color: rgba(2, 137, 109, 0.6);
        }
        &:focus {
          border-color: #02896D;
        }
      }
    }
    &.is-focus {
      .el-input__inner {
        border-color: #02896D;
      }
    }
    &.is-disabled {
      .el-input__inner {
        border-color: transparent;
        background-color: rgba(2,137,109,0.2);
      }
    }
  }
  .el-textarea__inner {
    background: rgba(2,137,109,0.2);
    border-color: transparent;
    &:focus {
      background: rgba(2,137,109,0.2);
    }
    &:not([readonly]):not([disabled]) {
      &:hover {
        border-color: rgba(2, 137, 109, 0.6);
      }
      &:focus {
        border-color: #02896D;
      }
    }
  }

  // 按钮覆写
  .el-button {
    border: none;
    &.el-button--text.el-picker-panel__link-btn {
      color: #fff;
    }
    &.el-button--default {
      color: #fff;
      border: 2px solid transparent;
      background: rgba(2,137,109,0.1);
      box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        border: 1px dotted rgba(2, 137, 109, 0.5);
      }
    }
    &.el-button--primary {
      color: #fff;
      background: none;
      border: 1px dotted rgba(2, 137, 109, 0.5);
      position: relative;
      > span {
        position: relative;
      }
      &::before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        border: 4px solid transparent;
        border-image-source: url('~@/assets/image/common/ly/btn_primarybg.png');
        border-image-slice: 9 fill;
      }
    }
    &.el-button--danger {
      color: #fff;
      background: none;
      border: 1px dotted rgba(2, 137, 109, 0.5);
      position: relative;
      > span {
        position: relative;
      }
      &::before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        border: 4px solid transparent;
        border-image-source: url('~@/assets/image/common/ly/btn_error.png');
        border-image-slice: 9 fill;
      }
    }

    &:hover {
      opacity: 0.6;
    }
    &:active {
      opacity: 0.8;
    }
    &.is-disabled {
      opacity: 0.4;
    }
  }

  .el-tree {
    color: #FFF;

    &.el-tree--highlight-current {
      .el-tree-node.is-current>.el-tree-node__content {
        background-color: rgba(2, 137, 109, 0.4);
      }
    }

    .el-tree-node {
      &:focus {
        >.el-tree-node__content {
          background-color: rgba(2, 137, 109, 0.4);
        }
      }
      .el-tree-node__content:hover {
        background-color: rgba(2, 137, 109, 0.4);
      }
    }
  }

  // 开关覆写
  .el-switch {
    span.el-switch__core {
      background: rgba(2,137,109,0.3);
      box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
      border-color: transparent;
    }
    &.is-checked {
      span.el-switch__core {
        background: rgba(2,137,109,0.7);
        box-shadow: inset 0px 0px 4px 0px #02896D;
        border-color: transparent;
      }
    }
  }

  // 下拉框覆写
  .el-select {
    .el-input{
      &.is-focus {
        .el-input__inner {
          border-color: #02896D;
        }
      }
    }
    .el-input__inner,
    .el-input__inner[readonly] {
      &:focus {
        border-color: #02896D;
      }
    }
    &:hover {
      .el-input__inner {
        border-color: rgba(2, 137, 109, 0.6);
      }
    }
  }
  &.el-select-dropdown {
    background: linear-gradient(180deg, rgba(0,67,63,0.85) 0%, rgba(0,19,30,0.74) 21%, #00131E 100%);
    border: 1px solid;
    border-color: #075B4A;
    margin-top: 13px;
    margin-bottom: 13px;

    .el-select-dropdown__list {
      padding: 0;
    }
    .el-select-dropdown__empty {
      color: #fff;
    }

    // 多选时，下拉的选中项目不需要背景色
    &.is-multiple {
      .el-select-dropdown__item {
        .el-checkbox {
          &.is-checked .el-checkbox__label {
            color: #02896D;
          }
          .el-checkbox__label {
            color: #fff;
          }
        }
      }
    }

    .el-select-dropdown__item {
      color: #FFFFFF;
      font-weight: 400;

      // 按照设计师要求，覆写el-select原本的滞留hover属性，只有严格悬停才会hover
      &.hover {
        background-color: transparent;
        &:hover {
          background-color: rgba(2, 137, 109, 0.4);
        }
      }
      &:hover {
        background-color: rgba(2, 137, 109, 0.4);
      }

      &.selected {
        color: #F9FF6C;
        background-color: rgba(2, 137, 109, 0.4);

        &.hover {
          color: #F9FF6C;
        }
      }
    }
  }

  // 单选框覆写
  .el-radio {
    .el-radio__input {
      .el-radio__inner {
        border-color: #02896D;
        background: transparent;
      }
      &.is-checked {
        .el-radio__inner::after {
          background-color: #ffffff;
          width: 6px;
          height: 6px;
        }
        .el-radio__inner {
          border-color: #02896D;
          background: #02896D;
        }
      }
    }
    &.is-checked {
      .el-radio__label {
        color: #fff;
      }
    }
    .el-radio__label {
      color: #fff;
    }
  }


  // 复选框覆写
  .el-checkbox {
    .el-checkbox__label {
      color: #fff;
      font-weight: 400;
    }

    .el-checkbox__input {
      .el-checkbox__inner {
        width: 16px;
        height: 16px;
        background-color: rgba(2,137,109,0.3);
        border-color: transparent;
        box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
        border-radius: 3px;
        border: none;
      }
      &.is-checked {
        .el-checkbox__inner {
          background-color: rgba(2,137,109,0.7);
          box-shadow: inset 0px 0px 4px 0px #02896D;
          &::after {
            left: 5px;
            top: 2px;
          }
        }
        .el-checkbox__label {
          color: rgba(249, 255, 108, 1);
        }
      }
      &.is-indeterminate {
        .el-checkbox__inner {
          background: rgba(2,137,109,0.7);
          box-shadow: inset 0px 0px 4px 0px #02896D;

          &::before {
            height: 4px;
            top: 6px;
          }
        }
      }
    }
  }

  // 时间选择器覆写
  .el-date-editor {
    .el-range-input {
      color: #fff;
      background: transparent;
      font-size: 14px;
    }
    .el-range-separator {
      font-size: 14px;
      color: #fff;
      width: 20px;
    }
    &.el-input__inner {
      border-color: transparent;
      background: rgba(2,137,109,0.2);
      align-items: center;
    }
    // 设计师好像要求的是这个图标，对使用这个图标的日期选择器做统一处理
    i.iconfont_tools.icon-tongyong-shaixuanriqi {
      color: #fff;
      font-size: 18px;
      line-height: 25px;
      margin-right: 12px;
      &::before {
        // vertical-align: middle;
        // margin-top: 4px;
        margin-left: 12px;
      }
    }
  }
  // 时间弹出面板覆写
  &.el-date-range-picker.el-picker-panel {
    width: 490px;
    background: $IWLYPopBgColor;
    border-color: #075B4A;
    color: #fff;
    border-radius: 8px;
    .el-picker-panel__content.el-date-range-picker__content {
      padding: 0;
      &.is-left {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
    &.has-sidebar {
      width: 576px;
    }
    .el-picker-panel *[slot=sidebar], .el-picker-panel__sidebar {
      width: 80px;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      +.el-picker-panel__body {
        margin-left: 80px;
      }
    }
    .popper__arrow {
      display: none;
    }
    .el-date-range-picker__time-header {
      border-color: #3D4756;

      .el-icon-arrow-right {
        color: var(--iw-text-color);
      }
    }
    .el-picker-panel__sidebar {
      padding-top: 0;
      background: transparent;
      .el-picker-panel__shortcut {
        color: #fff;
        &:hover {
          background: rgba(2, 137, 109, 0.6);
          border-right: 1px solid rgba(255, 255, 255, 0.2)
        }
      }
    }
    .el-picker-panel__body {
      min-width: auto;
    }
    .el-date-range-picker__header {
      color: #fff;
      padding: 10px 8px;
      height: 32px;
      line-height: 12px;
      div {
        font-size: 14px;
        margin-left: 40px;
        margin-right: 40px;
        display: flex;
        justify-content: center;
      }
      .el-picker-panel__icon-btn {
        font-size: 20px;
        padding: 0;
        margin-top: -4px;
        color: #fff;

        // &.el-icon-d-arrow-left {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea80'
        //   }
        // }
        // &.el-icon-arrow-left {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea49'
        //   }
        // }
        // &.el-icon-d-arrow-right {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea7e'
        //   }
        // }
        // &.el-icon-arrow-right {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea47'
        //   }
        // }
      }
    }
    .el-date-table {
      padding: 0 12px 12px 12px;
      font-size: 14px;
      tr {
        th {
          color: #fff;
          text-align: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
      }
      th {
        padding: 0;
      }
      td {
        padding: 0;
        height: 32px;
        &.prev-month,
        &.next-month {
          color: rgba(255, 255, 255, 0.4);
        }
        div {
          height: 32px;
        }
        span {
          width: 28px;
          height: 28px;
          line-height: 28px;
          top: 2px;
        }
        &.today {
          span {
            color: #0DC985;
          }
        }
        &.today.in-range {
          span {
            color: #fff;
          }
        }

        &.start-date {
          div {
            margin-left: 0;
            span {
            }
          }
        }
        &.end-date {
          div {
            margin-right: 0;
            span {
            }
          }
        }
      }
    }
    .el-date-table td.available:hover {
      color: #FFFFFF;
      span {
        background-color: #006c56;
      }
    }
    .el-date-table td.disabled div {
      background-color: transparent;
      color: rgba(255, 255, 255, 0.4);
    }
    .el-date-table td.in-range div {
      background-color: rgba(2, 137, 109, 0.4)
    }
    .el-date-table td.start-date span, .el-date-table td.end-date span {
      background: #02896d;
    }

    .el-picker-panel__footer {
      background: none;
      .el-button {
        &.el-button--text.el-picker-panel__link-btn {
          color: #fff;
          background: rgba(2,137,109,0.1);
          box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
          position: relative;
          &::before {
            content: "";
            position: absolute;
            top: -2px;
            right: -2px;
            bottom: -2px;
            left: -2px;
            border: 1px dotted rgba(2, 137, 109, 0.5);
          }
        }
        &.el-button--default {
          color: #fff;
          background: none;
          border: 1px dotted rgba(2, 137, 109, 0.5);
          position: relative;
          > span {
            position: relative;
          }
          &::before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            border: 4px solid transparent;
            border-image-source: url('~@/assets/image/common/ly/btn_primarybg.png');
            border-image-slice: 9 fill;
          }
        }
      }
    }
  }

  .el-time-panel,
  &.el-time-panel {
    background: rgba(23, 37, 55, 0.9);
    border-color: rgba(23, 37, 55, 0.9);

    .el-time-spinner__item {
      color: var(--iw-text-color);
      &.active {
        color: #f9ff6c;
      }
      &:hover:not(.disabled):not(.active) {
        background-color: #1A2839;
      }
    }
    .el-time-panel__content::after, .el-time-panel__content::before {
      border-color: rgba(255, 255, 255, 0.2);
    }
    .el-time-spinner__wrapper {
      + .el-time-spinner__wrapper {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
    .el-time-panel__btn {
      color: var(--iw-text-color);
      &.cancel {
        color: #fff;
        background: rgba(2,137,109,0.1);
        box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: -2px;
          right: -2px;
          bottom: -2px;
          left: -2px;
          border: 1px dotted rgba(2, 137, 109, 0.5);
        }
      }
      &.confirm {
        color: #fff;
        background: none;
        border: 1px dotted rgba(2, 137, 109, 0.5);
        position: relative;
        > span {
          position: relative;
        }
        &::before {
          content: '';
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          border: 4px solid transparent;
          border-image-source: url('~@/assets/image/common/ly/btn_primarybg.png');
          border-image-slice: 9 fill;
        }
      }
    }

    .el-time-panel__footer {
      border-color: #3D4756;
    }
  }

  // 表格覆写
  .el-table{
    // FIXME 看起来写在wrapper是通用应用原本就值得商榷的行为，待确认
    .el-table__header-wrapper {
      background: rgba(2, 137, 109, .2);
      color: #fff;
      th {
        background: none;
      }
    }
    &.el-table--enable-row-hover {
      .el-table__body tr {
        &:hover {
          td {
            background: rgba(2, 137, 109, 0.4);
          }
        }
      }
    }
  }

  // 分页组件
  .el-pagination.is-background.el-pagination--small,
  .el-pagination {
    .btn-prev, .btn-next {
      color: #fff;
      background: none;
    }
    li.number {
      background-color: transparent;
      border-radius: 4px;
      color: #fff;
      &:not(.disabled):hover {
        color: rgba(2, 137, 109, 1);
      }
      &:not(.disabled).active {
        background-color: rgba(2, 137, 109, 1);
        &:hover {
          color: #fff;
        }
      }
    }
  }

  // 加载中覆写
  .el-loading-spinner {
    .el-loading-text {
      color: #0DC985;
    }
    i {
      color: #0DC985;
    }
  }

  .el-scrollbar__thumb {
    background-color: rgba(2, 136, 109, 0.4);
  }
  // 其他普通滚动条使用保底的覆盖样式
  ::-webkit-scrollbar,
  &::-webkit-scrollbar {
    width: 6px ;
    height: 6px ;
    border-radius: 3px ;
  }

  ::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb {
    border-radius: 3px ;
    background-color: rgba(2, 136, 109, 0.4);
    border: 0 ;
  }

  ::-webkit-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(2, 136, 109, 0.4);
  }
}
